import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Button, Progress, Tabs, Select, Input, Table, Spin, Checkbox, Radio, message } from 'antd';
import styles from "./similarAsk.less";
import bulb from '@/assets/medicalKnowledge/灯泡.png';
import { faTshirt } from '@fortawesome/fontawesome-free-solid';

const { Option } = Select;
const Search = Input.Search;

class SimilarAsk extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ProgressName: '',
      totala: '',
      Selectpd: 'false', // false 为未忽略 true 为已忽略
      Selectcc: false, // 是否忽略传参
      login: false,
      searchKeys: '',
      page: 1,
      pageSize: 10,
      index:'',
      index:'',
      similarList: [],
      value: '',
      value1: '',
      judgeMobile: '',
      judgeMobiles: '',
      frompd: 1,
      selected:'',
      list: [
        {
          _id: {
            $oid: "5cd38e354638cb2dd33ca3b8"
          },
          questions: [
            "中银贷逾期一天怎么还",
            "中银贷逾期怎么还"
          ],
          score: 0.7881667613983154,
          sids: [
            "user-5b486bc41b0000da00121739",
            "user-5b1b365c1c00004a05639ee2"
          ],
          stds: [
            "中银贷逾期怎么办",
            "中银贷逾期怎么还款"
          ]
        },
        {
          _id: {
            $oid: "5cd38e354638cb2dd33ca3b8"
          },
          questions: [
            "中银贷逾期一天怎么还12",
            "中银贷逾期怎么还12"
          ],
          score: 0.7881667613983154,
          sids: [
            "user-5b486bc41b0000da00121739",
            "user-5b1b365c1c00004a05639ee2"
          ],
          stds: [
            "中银贷逾期怎么办12",
            "中银贷逾期怎么还款12"
          ]
        },
        {
          _id: {
            $oid: "5cd38e354638cb2dd33ca3b8"
          },
          questions: [
            "中银贷逾期一天怎么还123",
            "中银贷逾期怎么还123"
          ],
          score: 0.7881667613983154,
          sids: [
            "user-5b486bc41b0000da00121739",
            "user-5b1b365c1c00004a05639ee2"
          ],
          stds: [
            "中银贷逾期怎么办123",
            "中银贷逾期怎么还款123"
          ]
        },
      ]
    };
  }

  componentDidMount() {
    const { Selectcc, pageSize, page, searchKeys } = this.state
    this.similarAskList(Selectcc, pageSize, page, searchKeys)
  }

  componentDidUpdate() {

  }


  componentWillReceiveProps(nextProps, nextContext) {
    console.log(nextProps, nextContext)

    if (nextProps.ProgressName !== this.state.ProgressName) {
      this.setState({ ProgressName: nextProps.ProgressName })
    }
    if (nextProps.ProgressName == 2) { // 列表清空
      this.setState({ Selectpd: 'false', similarList: [], ProgressName: nextProps.ProgressName,totala:0 })
      this.props.totala1(0)
    }
    if (nextProps.ProgressName == 1) { // 恢复数据
      // this.setState({ totala: 0 })
      if (this.state.ProgressName !== nextProps.ProgressName) {
        this.setState({ Selectcc: false, page: 1, pageSize: 10, searchKeys: '' }, () => {
          const { Selectcc, pageSize, page, searchKeys } = this.state
          this.similarAskList(Selectcc, pageSize, page, searchKeys)
        })
        this.props.totala1(this.state.totala)
        this.setState({ ProgressName: nextProps.ProgressName }, () => {
          console.log('111')
        })
      }
    }
  }

  SelectValue = value => {
    console.log(`选择器 ${value}`);
    if (value === 'false') {
      this.setState({ Selectcc: false }, () => {
        const { Selectcc, pageSize, page, searchKeys } = this.state
        this.similarAskList(Selectcc, pageSize, page, searchKeys)
      })
    }
    if (value === 'true') {
      this.setState({ Selectcc: true }, () => {
        const { Selectcc, pageSize, page, searchKeys } = this.state
        this.similarAskList(Selectcc, pageSize, page, searchKeys)
      })
    }

  }

  append = (item) => {
    console.log('添加到按钮', item)
    const { value, value1, judgeMobile, judgeMobiles,index,index1,selected } = this.state
    if (judgeMobile === item.set[0] ||judgeMobile === item.set[1]||judgeMobiles === item.set[0]||judgeMobiles === item.set[1]) {
      // let from = {}
      // from.ques = item.questions[index]
      // from.sid = item.sids[index]
      // let toStdId = item.sids[index1]
      this.setState({ login: true })
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'medicalKnowledge/movingSimilarQuestions',
          payload: { id:item.id, selected:selected },
          callback: res => {
            console.log('移动相似问', res)
            if (res.code === 0) {
              message.success(`${res.msg}`)

            }
            this.setState({
              login: false,
              value: '',
              value1: '',
            }, () => {
              const { Selectcc, pageSize, page, searchKeys } = this.state
              this.similarAskList(Selectcc, pageSize, page, searchKeys) // 刷新页面
            })
          },
        });
      });
    } else {
      message.error('无效的移动操作')
    }
  }

  // append = (item) => {
  //   console.log(item)
  // }



  anButton = (item,idIndex) => { // 相似问
    console.log(item,idIndex)
    this.setState({ judgeMobile:idIndex })
  }

  anButtons = (item,idIndex) => { // 所属知识点
    console.log(item)
    this.setState({ judgeMobiles:idIndex })
  }

  deleteTable = (items, item, index) => { // 删除相似问
    console.log(items, item, index, items.sids[index])

    this.setState({ login: true })
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'medicalKnowledge/deleteSimilarQuestions',
        payload: { question: item, sid: items.sids[index],id:items.id },
        callback: res => {
          console.log('删除相似问', res)
          if(res.statue==='success'){
            message.success(`${res.msg}`)
          }
          this.setState({
            login: false,
          }, () => {
            const { Selectcc, pageSize, page, searchKeys } = this.state
            this.similarAskList(Selectcc, pageSize, page, searchKeys)
          })
        },
      });
    });
  }

  iose = (item) => {
    console.log('忽略按钮', item)
    const { Selectcc } = this.state
    let a = []
    if (Selectcc) {
      a.push(item.id)
      this.ignore(true, a)
    }
    if (Selectcc === false) {
      a.push(item.id)
      this.ignore(false, a)
    }

  }

  ignore = (a, b) => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'medicalKnowledge/ignoreSimilarQue',
        payload: { isIgnore: a, _id: b },
        callback: res => {
          console.log('忽略按钮', res)
          if (res.statue === 'success') {
            message.success(`${res.msg}`)
          }
          this.setState({
            login: false,
          }, () => {
            const { Selectcc, pageSize, page, searchKeys } = this.state
            this.similarAskList(Selectcc, pageSize, page, searchKeys)
          })
        },
      });
    });
  }

  onChangeCheckbox = (checkedValues) => {
    console.log('checked = ', checkedValues);
  }

  onChangeGroup = (e, items,index ,inIndex) => {
    console.log('1',e.target.value,'2',items)
    console.log('id值',inIndex)
    // this.setState({
    //   value: inIndex,
    //   value1: items.stds[1],
    // });
    if (e.target.value === items.set[0]) {
      console.log('111')
      this.setState({
        value: inIndex,
        selected:1,
        value1: items.set[1],
        index: index,
        index1: 1,
      });
    }
    if (e.target.value === items.set[1]) {
      this.setState({
        value:inIndex,
        selected:2,
        value1: items.set[0],
        index: index,
        index1: 0,
      });
    }
  }

  onChangeIntellectual = (e,items,index,inIndex) => {
    console.log(e.target.value,items)
    if (e.target.value === items.set[0]) {
      this.setState({
        value1:inIndex,
        selected:1,
        value:  items.set[1],
        index1:index,
        index:1
      });
    }
    if (e.target.value === items.set[1]) {
      this.setState({
        value1: inIndex,
        selected:2,
        value: items.set[0],
        index1:index,
        index:0
      });
    }
  }

  // 相似问列表
  similarAskList = (isIgnore, limit = 10, page = 1, searchKeys) => {
    this.setState({ login: true })
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'medicalKnowledge/similarAskList',
        payload: { isIgnore, limit, page, searchKeys, searchTypee: 'CHECK_SIMILAR_QUES', },
        callback: res => {
          console.log('相似问列表', res)
         
          // var str = "123456789";
          // var abc = `${str}tcx`
          // console.log(abc)
          let Data =  res.list
         Data.map((item,index)=>{
          let a = []
            item.sids.map((val,indx)=>{
                let b =`${val}${index}`
                a.push(b)
            })
            Data[index].set = a
          })
         
          console.log(Data)
          this.setState({
            login: false,
            similarList:Data,
            totala: res.total
          }, () => {
            this.props.totala1(this.state.totala)
          })
        },
      });
    });
  }

  pageWay = (a) => {
    console.log(a)
    this.setState({ page: a }, () => {
      const { Selectcc, pageSize, page, searchKeys } = this.state
      this.similarAskList(Selectcc, pageSize, page, searchKeys)
    })
  }

  onShowSizepageWay = (a, b) => {
    console.log(a, b)
    this.setState({ page: a, pageSize: b }, () => {
      const { Selectcc, pageSize, page, searchKeys } = this.state
      this.similarAskList(Selectcc, pageSize, page, searchKeys)
    })
  }

  allIgnore = () => { // 全部忽略
    const { similarList, Selectcc } = this.state
    let a = []
    similarList.map((item, index) => {
      a.push(item.id)
    })
    // a.push(item.id)
    console.log(a)
    if (Selectcc) {
      this.ignore(true, a)
    }
    if (Selectcc === false) {
      this.ignore(false, a)
    }

  }


  render() {
    const { getFieldDecorator } = this.props.form;
    const columns = [
      {
        title: '相似问法',
        width: 'calc(30vw)',
        dataIndex: 'questions',
        render: (questions, items) => {
          return <Row>
            {questions.map((item, index) => {

              return <Row style={{ marginBottom: 10 }}>
                <Col span={4} onClick={() => { this.anButton(item,items.set[index]) }}>
                  <Radio.Group onChange={event=>{this.onChangeGroup(event,items,index,items.set[index])}} value={this.state.value}>
                    <Radio style={{ marginRight: 30 }} value={items.set[index]}></Radio>
                  </Radio.Group>
                </Col>
                <Col span={16}>
                <div  dangerouslySetInnerHTML={{ __html: item }}></div>
                </Col>
                <Col span={4}>
                  <Icon onClick={() => { this.deleteTable(items, item, index) }} className={styles.colorClose} style={{ fontSize: 8, color: '#fff', marginLeft: 20 }} type="close" />
                </Col>
              </Row>

            })}
          </Row>

        }
      },
      {
        title: '',
        width: 'calc(10vw)',
        dataIndex: '',
        render: (text, item) => {
          return <div className='zdyButtonD'><Button onClick={(text) => { this.append(item) }} type='primary'>添加到>></Button></div>
        }
      },
      {
        title: '所属知识点',
        dataIndex: 'stds',
        width: 'calc(30vw)',
        render: (stds, items) => {
          return <Row>
            {stds.map((item, index) => {

              return <Row style={{ marginBottom: 10 }}>
                <Col span={4} onClick={() => { this.anButtons(item,items.set[index]) }}>
                  <Radio.Group onChange={event=>{this.onChangeIntellectual(event,items,index,items.set[index])}}  value={this.state.value1}>
                    <Radio style={{ marginRight: 30 }} value={items.set[index]}></Radio>
                  </Radio.Group>
                </Col>
                <Col span={20}>
                  {item}
                </Col>
              </Row>

            })}
          </Row>

        }
      },

      {
        title: '',
        width: 'calc(10vw)',
        dataIndex: '',
        render: (text, item) => {
          if (this.state.Selectcc) {
            // 已忽略
            return <div className='zdyButtonA'><Button icon='eye-invisible' size='small' onClick={() => { this.iose(item) }} type='primary'>恢复</Button></div>

          } else {
            return <div className='zdyButtonA'><Button icon='eye-invisible' size='small' onClick={() => { this.iose(item) }} type='primary'>忽略</Button></div>
          }

        }
      },

    ]
    return (
      <Suspense fallback={< PageLoading />}>
        <div>
          <div className={styles.toptit}>
            {this.state.Selectcc ?<div className='zdyButtonA'><Button onClick={this.allIgnore} type='primary' icon='eye-invisible'>全部恢复</Button></div> : <div className='zdyButtonA'><Button onClick={this.allIgnore} type='primary' icon='eye-invisible'>全部忽略</Button></div>}
            <div>
              {getFieldDecorator('coreword1', {
                initialValue: this.state.Selectpd,
              })(
                <Select style={{ width: 120 }} onChange={this.SelectValue} >
                  <Option value="false">未忽略</Option>
                  <Option value="true">已忽略</Option>
                </Select>
              )}
              <span>&#12288;</span>
              {getFieldDecorator('coreword2', {
                initialValue: '',
              })(
                <Search
                  placeholder="多个关键词用空格隔开"
                  onSearch={value => {
                    this.setState({ searchKeys: value,page:1 }, () => {
                      const { Selectcc, pageSize, page, searchKeys } = this.state
                      this.similarAskList(Selectcc, pageSize, page, searchKeys)
                    })
                  }}
                  style={{ width: 324 }}
                />
              )}
            </div>
          </div>
          <Spin spinning={this.state.login}>
            <Table
              // className='zdyTable'
              style={{ padding: '20px 0px 0px 0px' }}
              columns={columns}
              dataSource={this.state.similarList}// 数据
              // onChange={this.handleChange}
              pagination={{  // 分页
                total: this.state.totala,
                pageSize: this.state.pageSize,  // 显示几条一页
                current: this.state.page, // 当前页
                showSizeChanger: true,  // 是否显示可以设置几条一页的选项
                showQuickJumper: true,
                onChange: this.pageWay,
                onShowSizeChange: this.onShowSizepageWay
              }}
            />
          </Spin>
        </div>
      </Suspense >
    );
  }
}

export default connect(({ user }) => ({ // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(SimilarAsk));